<template>
  <div class="order-management">
    <!-- 订单列表表格 -->
    <el-table :data="orderList" style="width: 100%" @row-click="handleRowClick">
      <el-table-column prop="number" label="订单编号" width="150" />
      <el-table-column prop="orderTime" label="下单时间" width="150" />
      <el-table-column prop="amount" label="支付金额" width="100" />
      <el-table-column prop="name" label="商品名称" width="150" />
      <el-table-column prop="address" label="收货地址" width="200" />
      <el-table-column label="操作" width="120">
        <template #default="scope">
          <el-button type="primary" link @click.stop="openDetailDialog(scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 详情对话框 -->
    <el-dialog v-model="dialogVisible" title="订单详情" width="600px">
      <el-descriptions :column="1" border>
        <el-descriptions-item label="订单编号">{{ currentOrder?.number }}</el-descriptions-item>
        <el-descriptions-item label="下单时间">{{ currentOrder?.orderTime }}</el-descriptions-item>
        <el-descriptions-item label="支付金额">{{ currentOrder?.amount }}</el-descriptions-item>
        <el-descriptions-item label="商品名称">{{ currentOrder?.name }}</el-descriptions-item>
        <el-descriptions-item label="收货地址">{{ currentOrder?.address }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ currentOrder?.phone }}</el-descriptions-item>
        <el-descriptions-item label="收货人">{{ currentOrder?.consignee }}</el-descriptions-item>
        <el-descriptions-item label="商品数量">{{ currentOrder?.quantity }}</el-descriptions-item>
      </el-descriptions>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
          <el-popconfirm title="确定要处理该订单吗？" @confirm="handleOrder">
            <template #reference>
              <el-button type="success">处理订单</el-button>
            </template>
          </el-popconfirm>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { ElMessage } from 'element-plus' // 引入 ElMessage

// 订单数据接口
interface Order {
  number: string
  orderTime: string
  amount: number
  name: string
  address: string
  phone: string
  consignee: string
  quantity: number
}

// 模拟订单数据
const orderList = ref<Order[]>([
  {
    number: '20240101001',
    orderTime: '2024-01-01 10:00:00',
    amount: 50.0,
    name: '苹果',
    address: '北京市朝阳区XX路XX号',
    phone: '13800138000',
    consignee: '张三',
    quantity: 10
  },
  {
    number: '20240102002',
    orderTime: '2024-01-02 11:00:00',
    amount: 30.0,
    name: '香蕉',
    address: '上海市浦东新区XX路XX号',
    phone: '13900139000',
    consignee: '李四',
    quantity: 20
  }
])

// 当前选中的订单
const currentOrder = ref<Order | null>(null)

// 控制详情对话框的显示
const dialogVisible = ref(false)

// 打开详情对话框
const openDetailDialog = (row: Order) => {
  currentOrder.value = row
  dialogVisible.value = true
}

// 处理订单
const handleOrder = () => {
  if (currentOrder.value) {
    // 这里可以添加实际的处理订单逻辑，比如调用 API
    dialogVisible.value = false
    ElMessage.success('订单处理成功')
  }
}

// 点击表格行事件
const handleRowClick = (row: Order) => {
  openDetailDialog(row)
}
</script>

<style scoped>
.order-management {
  padding: 20px;
}
</style>